<template>
  <view class="page-image">
    <up-navbar placeholder bgColor="transparent">
      <template #left>
        <view />
      </template>
      <template #center>
        <view class="text-700-532">消息中心</view>
      </template>
    </up-navbar>

    <view class="p-h24">
      <up-tabs :list="tabs" :activeStyle="activeStyle" lineColor="#3F77FB" />

      <view v-for="(item, index) in list" :key="index" class="card flex" @click="handleOpenItem(item)">
        <image class="cover" :src="item.images" mode="aspectFill" />

        <view class="flex-1 flex-d-lc m-l20">
          <view class="flex-sb w">
            <text class="text-700-130">{{ item.title }}</text>
            <text class="text-500-326">我的投递</text>
          </view>

          <view class="text m-t16">
            <view class="flex-sb  ">
              <text class="text-500-326">{{ item.fringe }}</text>
              <text class="text-500-326">{{ item.createtime }}</text>
            </view>
            <view class="btn">
              <text v-if="item.status == 1" class="text-500-326 checked">已接受</text>
              <text v-else class="text-500-326">待接受</text>
            </view>
          </view>
        </view>
      </view>
      <up-empty mode="list" text="暂无数据" v-if="!list.length"></up-empty>
    </view>
    <up-popup v-if="showPopup" :show="showPopup" mode="bottom" round="20rpx" closeable @close="showPopup = false">
      <BottomConfirm :id="uid" @close="showPopup = false" />
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import BottomConfirm from './components/bottom-confirm'
const list = ref([])
const uid = ref(0)
const showPopup = ref(false)

const activeStyle = {
  'color': '#3F77FB',
  'font-size': '28rpx',
  'font-weight': 'bold',
}

const tabs = reactive([
  { name: '面试邀请' },
])
//打开
function handleOpenItem(item) {
  if (item.status == 1) {
    return uni.showToast({ title: "您已接受面试" })
  }
  uid.value = item.id
  showPopup.value = true
}
//获取列表
async function getList() {
  const res = await uni.$u.get('/msg/lst')
  list.value = res.data
}
onShow(() => {
  getList()
})

</script>

<style lang="scss" scoped>
.card {
  height: 174rpx;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #EEEEEE;

  .cover {
    width: 108rpx;
    height: 108rpx;
    border-radius: 10rpx;
  }

  .text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    .btn {

      .checked {
        color: #1269FF;
      }
    }
  }
}
</style>
